<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        img {
            display: block;
        }

        #sports-header {
            width: 100%;
            height: 50px;
            background: #537bff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            font-size: 20px;
            padding: 0 10px;
            position: fixed;
            top: 0;
            z-index: 100;
        }

        #sports-main {
            margin-top: 50px;
            height: calc(100vh - 50px);
        }

        #sports-main ul {
            background: white;
        }

        #sports-main ul li {
            display: flex;
            border-bottom: 1px #f7f7f7 solid;
            margin: 0 18px;
            padding: 20px 0;
        }

        #sports-main .sports-list-text {
            flex: 1;
            font-size: 18px;
            line-height: 26px;
        }

        #sports-main .sports-list-text p:last-of-type {
            font-size: 14px;
            color: #828c9b;
            display: flex;
            margin-top: 10px;
        }

        #sports-main .sports-list-text p:last-of-type span {
            margin-right: 10px;
        }

        #sports-main .sports-list-img {
            width: 130px;
            margin-left: 20px;
        }

        #sports-main .sports-list-img img {
            width: 100%;
            border-radius: 10px;
        }

        #loadingDown {
            width: 100%;
            position: absolute;
            top: 60px;
            z-index: -1;
            text-align: center;
        }

        #loadingUp {
            width: 100%;
            text-align: center;
            padding: 20px 0;
        }

        #loading {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            z-index: 100;
        }
    </style>
    <script src="javascripts/template-web.js"></script>
    <script src="javascripts/axios.js"></script>
    <script src="javascripts/better-scroll.js"></script>
</head>

<body>
    <header id="sports-header">
        腾讯 | 体育
    </header>
    <div id="loadingDown"></div>
    <main id="sports-main">
        <div>
            <ul class="sports-list">

            </ul>
            <div id="loadingUp"></div>
        </div>
        <div id="loading"></div>
    </main>

    <script id="tpl-sportsList" type="text/html">
            {{ each list }}
            <li>
                <div class="sports-list-text">
                    <p>
                        {{ $value.title }}
                    </p>
                    <p>
                        <span>{{ $value.comment }}评</span>
                    </p>
                </div>
                <div class="sports-list-img">
                    <img src="{{ $value.img }}" alt="">
                </div>
            </li>
            {{ /each }}
        </script>
    <script>
        /*
        
        请求 方式, 以及如何使用 koa2 接收参数 


        
        */

        // var xhr = new XMLHttpRequest();
        // xhr.onload = function(){
        //     console.log('请求已经完成');
        // }

        // xhr.open('GET','/list?name=frank&age=18',true);
        // xhr.send();



        // var xhr = new XMLHttpRequest();
        // xhr.onload = function () {
        //     console.log('请求已经完成');
        // }
        // // xhr.addEventListener('load',function(){
        // //     console.log('请求已经完成');
        // // })
        // xhr.open('POST', '/register', true);
        // xhr.send();



        /*
            post request 
        */
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            console.log('请求已经完成');
        }

        /*

        第一个参数 :method 

        第二个参数 : path '/aaa/bbb'

        第三个参数 
        true : 表明为异步请求

        false : 表明为同步请求

        */
        xhr.open('POST', '/register', false);

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send("name=frank&age=18");
        console.log('hello frank');


        /*
        1. 创建 xhr 对象

        2. 监听请求完成

        3. 发出 http 请求  

            xhr.open(method,path,boolean)
            xhr.send()
        
        */

    </script>


</body>

</html>